<template>
    <div class="paymentData">
        <el-row class='first-title'>
            <div class="lf">
                <h3>薪酬数据看板</h3>
            </div>
        </el-row>
        <el-row :gutter="20" class="paneRow">
            <el-col :span='12'>
                <div class="table-container rankPerIncomePane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>各职级人均收入</span>
                        </div>
                        <el-tabs v-model="rankPerIncomePane.rankPerIncomeTab" type="card">
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[0]" name="first">
                                <div class="paneDiv">
                                    <el-table
                                        :data="rankPerIncomePane.rankPerIncomeTable.beforeData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[1]" name="second">
                                <div class="paneDiv">
                                    <el-table
                                        :data="rankPerIncomePane.rankPerIncomeTable.lastData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[2]" name="third">
                                <div class="paneDiv">
                                    <el-table
                                        :data="rankPerIncomePane.rankPerIncomeTable.thisData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </el-col>
            <el-col :span='12'>
                <div class="table-container managerIncomePane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>总经理年收入基准值</span>
                        </div>
                        <el-tabs v-model="managerIncomePane.managerIncomeTab" type="card">
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[0]" name="first">
                                <div class="paneDiv">
                                    <el-table
                                        :data="managerIncomePane.managerIncomeTable.beforeData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[1]" name="second">
                                <div class="paneDiv">
                                    <el-table
                                        :data="managerIncomePane.managerIncomeTable.lastData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[2]" name="third">
                                <div class="paneDiv">
                                    <el-table
                                        :data="managerIncomePane.managerIncomeTable.thisData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="paneRow">
            <el-col :span='12'>
                <div class="table-container allPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>整体</span>
                        </div>
                        <div class="chartDiv">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div ref="allChartLeft" style="height:250px"></div>
                                </el-col>
                                <el-col :span="12">
                                    <div ref="allChartRight" style="height:250px"></div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span='12'>
                <div class="table-container perPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人均</span>
                        </div>
                        <div ref="perChart" style="height:250px"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>效能</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="efficiencyChart" style="height:350px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人工成本</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="laborCostChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>职工人数</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="staffNumChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container PerSalaryPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人均工资</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="perSalaryChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>劳动生产率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="productivityRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人事费用率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="staffCostRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人工成本利润率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="laborCostRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>投入产出比</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="inoutRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import echarts from "echarts"
    import {
        Col,
        Row,
        Tabs,
        TabPane,
        Card
    } from 'element-ui'
    Vue.use(Col)
    Vue.use(Row)
    Vue.use(Tabs)
    Vue.use(TabPane)
    Vue.use(Card)

    export default {
        data (){
            return {
                rankPerIncomePane:{
                    rankPerIncomeTab:'third',
                    rankPerIncomeTable:{
                        thisData: [],
                        lastData: [],
                        beforeData: [],
                        columns: [],
                        list:[],
                    }
                },
                managerIncomePane:{
                    managerIncomeTab:'third',
                    managerIncomeTable:{
                        thisData: [],
                        lastData: [],
                        beforeData: [],
                        list:[],
                        columns: [
                            {
                                prop:'descrshort',
                                label:'部门单位',
                                width:'120'
                            },
                            {
                                prop:'unit',
                                label:'货币单位',
                                width:'100'
                            },
                            {
                                prop:'ngwgz',
                                label:'年岗位工资',
                                width:'120'
                            },
                            {
                                prop:'jxgz',
                                label:'绩效奖金',
                                width:'100'
                            },
                            {
                                prop:'fzgz',
                                label:'辅助工资',
                                width:'100'
                            },
                            {
                                prop:'nsrjzz',
                                label:'年收入基准值',
                                width:'140'
                            }
                        ]
                    }
                }
            }
        },
        components:{
        },
        created () {
        },
        mounted (){
            this.getRankPerIncomeData()
            this.getManagerIncomeData()
            this.getAllData()
            this.getPerData()
            // 人工成本
            this.getLaborCostData()
            this.getStaffNumData()
            this.getEfficiencyData()
            this.getPerSalaryData()
            this.getProductivityRatioData()
            this.getStaffCostRatioData()
            this.getLaborCostRatioData()
            this.getInoutRatioData()
        },
        methods:{
            // 柱折混合图公共函数
            barLinePublic:function(res,data,func){
                if(res.data.status === 1){
                    var opt = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            // feature: {
                            //     dataView: {show: true, readOnly: false},
                            //     magicType: {show: true, type: ['line', 'bar']},
                            //     restore: {show: true},
                            //     saveAsImage: {show: true}
                            // }
                        },
                        legend: {
                            data:[]
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: [],
                                nameRotate: 90,
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '',
                                min: 0,
                                max: 50,
                                // interval: 10,
                                // splitNumber:5,
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            {
                                type: 'value',
                                name: '',
                                min: 0,
                                max: 100,
                                // interval: 20,
                                // splitNumber:5,
                                axisLabel: {
                                    formatter: '{value}%'
                                }
                            }
                        ],
                        series: [
                            {
                                name:'',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#3398DB'
                                    }
                                },
                                data:[]
                            },
                            {
                                name:'',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#f44336'
                                    }
                                },
                                data:[]
                            },
                            {
                                name:'',
                                type:'line',
                                yAxisIndex: 1,
                                itemStyle:{
                                    normal:{
                                        color:'#A991F2'
                                    }
                                },
                                data:[]
                            }
                        ]
                    }
                    if(data.length){
                        opt.legend.data.push(''+data[0].before)
                        opt.legend.data.push(''+data[0].last)
                        opt.legend.data.push('同比增长率')
                        opt.yAxis[0].name = data[0].unit
                        opt.yAxis[1].name = '同比增长率'
                        opt.series[0].name = data[0].before
                        opt.series[1].name = data[0].last
                        opt.series[2].name = '同比增长率'
                        for(var i=0; i<data.length; i++){
                            opt.xAxis[0].data.push(data[i].descr)
                            opt.series[0].data.push(data[i].beforeYear)
                            opt.series[1].data.push(data[i].lastYear)
                            opt.series[2].data.push(parseFloat(data[i].yearGrowth))
                        }
                    }
                    var minMaxObj1 = this.getMinMaxObj(opt.series[0].data.concat(opt.series[1].data),5,0,null)
                    var minMaxObj2 = this.getMinMaxObj(opt.series[2].data,5,null,null)
                    opt.yAxis[0].min = minMaxObj1.min
                    opt.yAxis[0].max = minMaxObj1.max
                    opt.yAxis[0].interval = minMaxObj1.interval
                    opt.yAxis[1].min = minMaxObj2.min
                    opt.yAxis[1].max = minMaxObj2.max
                    opt.yAxis[1].interval = minMaxObj2.interval
                    // console.log('77777777777777',minMaxObj1)
                    // console.log('99999999999999',minMaxObj2)
                    func(opt)
                }
            },
            // 比率公共函数
            ratioPublic:function(res,data,func){
                if(res.data.status === 1){
                    var opt = {
                        title: {
                            text: '',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter:'{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
                        },
                        legend: {
                            data: []
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: []
                        },
                        series: [
                            {
                                name: '',
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#3398DB'
                                    }
                                },
                                data: []
                            },
                            {
                                name: '',
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#f44336'
                                    }
                                },
                                data: []
                            }
                        ]
                    }
                    if(data.length){
                        opt.legend.data.push(''+data[0].before)
                        opt.legend.data.push(''+data[0].last)
                        // opt.xAxis.name = data[0].unit
                        opt.series[0].name = data[0].before
                        opt.series[1].name = data[0].last
                        for(var i=0; i<data.length; i++){
                            opt.yAxis.data.push(data[i].descr)
                            opt.series[0].data.push(data[i].beforeYear)
                            opt.series[1].data.push(data[i].lastYear)
                        }
                    }
                    func(opt)
                }
            },
            // 获取数组最小最大值,并根据间隔数设置坐标轴间隔
            getMinMaxObj:function(arr,splitNumber,min,max){
                var obj = {
                    min:0,
                    max:0,
                    interval:0
                }
                // var minDigits = 0,minMid,maxDigits = 0,maxMid
                if(arr.length){
                    obj.min = arr[0]
                    obj.max = arr[0]
                    for(var i=1; i<arr.length; i++){
                        if(obj.min>arr[i]){
                            obj.min = arr[i]
                        }
                        if(obj.max<arr[i]){
                            obj.max = arr[i]
                        }
                    }
                }
                // minMid = obj.min
                // maxMid = obj.max
                // while(parseInt(minMid)/10 !== 0){
                //     minMid = parseInt(minMid)/10
                //     minDigits++
                // }
                // while(parseInt(maxMid)/10 !== 0){
                //     maxMid = parseInt(maxMid)/10
                //     maxDigits++
                // }
                if(min !== null && max !== null){
                    obj.min = min
                    obj.max = max
                }else{
                    if(min !== null){
                        obj.min = min
                        // obj.max = parseInt(obj.max)/(10*maxDigits)*(10*maxDigits)+10*maxDigits
                        obj.max = parseInt(obj.max)+10
                    }else if(max !== null){
                        obj.max = max
                        // obj.min = parseInt(obj.min)/(10*minDigits)*(10*minDigits)+10*minDigits
                        obj.min = parseInt(obj.min)-10
                    }else{
                        // obj.min = parseInt(obj.min)/(10*minDigits)*(10*minDigits)+10*minDigits
                        // obj.max = parseInt(obj.max)/(10*maxDigits)*(10*maxDigits)+10*maxDigits
                        obj.min = parseInt(obj.min)-10
                        obj.max = parseInt(obj.max)+10  
                    }
                }
                obj.interval = (obj.max - obj.min)/splitNumber
                return obj
            },
            // 获取各职级人均收入
            getRankPerIncomeData:function(){
                this.ajaxPost('/dataBoard/getPerRankIncomeList',null,this.getRankPerIncomeCB)
            },
            getRankPerIncomeCB:function(res){
                if(res.data.status === 1){
                    var colm = []
                    this.rankPerIncomePane.rankPerIncomeTable.thisData = res.data.datas.thisShowList
                    this.rankPerIncomePane.rankPerIncomeTable.lastData = res.data.datas.lastShowList
                    this.rankPerIncomePane.rankPerIncomeTable.beforeData = res.data.datas.beforeShowList
                    colm.push({
                        prop:'descrshort',
                        label:'部门单位',
                        width:'120'
                    })
                    colm.push({
                        prop:'unit',
                        label:'货币单位',
                        width:'100'
                    })
                    for(var i=0; i<res.data.datas.perRankLise.length; i++){
                        colm.push({
                            prop: res.data.datas.perRankLise[i].rankId,
                            label: res.data.datas.perRankLise[i].rankName,
                            width:'140'
                        })
                    }
                    this.rankPerIncomePane.rankPerIncomeTable.columns = colm
                }
            },
            // 总经理年收入基准值
            getManagerIncomeData:function(){
                this.ajaxPost('/dataBoard/getGeneralManagerList',null,this.getManagerIncomeCB)
            },
            getManagerIncomeCB:function(res){
                if(res.data.status === 1){
                    this.managerIncomePane.managerIncomeTable.thisData = res.data.datas.thisShowList
                    this.managerIncomePane.managerIncomeTable.lastData = res.data.datas.lastShowList
                    this.managerIncomePane.managerIncomeTable.beforeData = res.data.datas.beforeShowList
                    this.managerIncomePane.managerIncomeTable.list = res.data.datas.years
                }
            },
            // 整体数据
            getAllData:function(){
                this.ajaxPost('/dataBoard/getAllEmpAndCost',null,this.getAllDataCB)
            },
            getAllDataCB:function(res){
                if(res.data.status === 1){
                    var data1 = res.data.datas.staffTotal
                    var data2 = res.data.datas.laborCost
                    var opt = {
                        color: ['#3398DB','#444'],
                        title: {
                            text: '职工人数',
                            subtext: ''
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: []
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : [],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name: ''
                            }
                        ],
                        series : [
                            {
                                name:'职工人数',
                                type:'bar',
                                barWidth: '60%',
                                data:[]
                            }
                        ]
                    }
                    var opt2 = {
                        color: ['#f44336','#444'],
                        title: {
                            text: '人工成本',
                            subtext: ''
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: []
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : [],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name: ''
                            }
                        ],
                        series : [
                            {
                                name:'人工成本',
                                type:'bar',
                                barWidth: '60%',
                                data:[]
                            }
                        ]
                    }
                    var xAxis = [], series = [], xAxis2 = [], series2 = []
                    for(var i=0; i<data1.length; i++){
                        xAxis.push(data1[i].year)
                        series.push(data1[i].total)
                    }
                    for(var i=0; i<data2.length; i++){
                        xAxis2.push(data2[i].year)
                        series2.push(data2[i].total)
                    }
                    opt.xAxis[0].data = xAxis
                    opt.series[0].data = series
                    opt2.xAxis[0].data = xAxis2
                    opt2.series[0].data = series2
                    if(data1.length){
                        opt.title.subtext = '单位:'+data1[0].unit
                    }
                    if(data2.length){
                        opt2.title.subtext = '单位:'+data2[0].unit
                    }
                    this.drawAllChart(opt,opt2)
                }
            },
            drawAllChart:function(option,option2){
                var leftChart = echarts.init(this.$refs.allChartLeft)
                var rightChart = echarts.init(this.$refs.allChartRight)
                leftChart.setOption (option)
                rightChart.setOption (option2)
            },
            // 人均数据
            getPerData:function(){
                this.ajaxPost('/dataBoard/getPerStatisticsBydata',null,this.getPerCB)
            },
            getPerCB:function(res){
                if(res.data.status === 1){
                    var data = res.data.datas.perStatisList
                    var opt = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            // feature: {
                            //     dataView: {show: true, readOnly: false},
                            //     magicType: {show: true, type: ['line', 'bar']},
                            //     restore: {show: true},
                            //     saveAsImage: {show: true}
                            // }
                        },
                        legend: {
                            data:[]
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: [],
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '水量',
                                min: 0,
                                max: 100,
                                interval: 20,
                                // splitNumber:5,
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            {
                                type: 'value',
                                name: '温度',
                                min: 0,
                                max: 100,
                                interval: 20,
                                // splitNumber:5,
                                axisLabel: {
                                    formatter: '{value}%'
                                }
                            }
                        ],
                        series: [
                            {
                                name:'',
                                type:'bar',
                                itemStyle:{
                                  normal:{
                                      color:'#3398DB'
                                  }
                                },
                                data:[]
                            },
                            {
                                name:'',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#f44336'
                                    }
                                },
                                data:[]
                            },
                            {
                                name:'',
                                type:'line',
                                yAxisIndex: 1,
                                itemStyle:{
                                    normal:{
                                        color:'#A991F2'
                                    }
                                },
                                data:[]
                            }
                        ]
                    }
                    if(data.length){
                        opt.legend.data.push(''+data[0].before)
                        opt.legend.data.push(''+data[0].last)
                        opt.legend.data.push('同比增长率')
                        opt.yAxis[0].name = data[0].unit
                        opt.yAxis[1].name = '同比增长率'
                        opt.series[0].name = data[0].before
                        opt.series[1].name = data[0].last
                        opt.series[2].name = '同比增长率'
                        for(var i=0; i<data.length; i++){
                            opt.xAxis[0].data.push(data[i].china_name)
                            opt.series[0].data.push(data[i].beforeYear)
                            opt.series[1].data.push(data[i].lastYear)
                            opt.series[2].data.push(parseFloat(data[i].yearGrowth))
                        }
                    }
                    this.drawPerChart(opt)
                }
            },
            drawPerChart:function(option){
                var leftChart = echarts.init(this.$refs.perChart)
                leftChart.setOption (option)
            },
            // 效能数据
            getEfficiencyData:function(){
                this.ajaxPost('/dataBoard/getAllEfficacy',null,this.getEfficiencyCB)
            },
            getEfficiencyCB:function(res){
                if(res.data.status === 1){
                    var data = res.data.datas.efficacyList
                    var opt = {
                        title: {
                            text: '',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter:'{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
                        },
                        legend: {
                            data: []
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: []
                        },
                        series: [
                            {
                                name: '2011年',
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#3398DB'
                                    }
                                },
                                data: []
                            },
                            {
                                name: '2012年',
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#f44336'
                                    }
                                },
                                data: []
                            }
                        ]
                    }
                    if(data.length){
                        opt.legend.data.push(''+data[0].before)
                        opt.legend.data.push(''+data[0].last)
                        // opt.xAxis.name = data[0].unit
                        opt.series[0].name = data[0].before
                        opt.series[1].name = data[0].last
                        for(var i=0; i<data.length; i++){
                            opt.yAxis.data.push(data[i].china_name)
                            opt.series[0].data.push(data[i].beforeYear)
                            opt.series[1].data.push(data[i].lastYear)
                        }
                    }
                    this.drawEfficiencyChart(opt)
                }
            },
            drawEfficiencyChart:function(option){
                var leftChart = echarts.init(this.$refs.efficiencyChart)
                leftChart.setOption (option)
            },
            // 人工成本
            getLaborCostData:function(){
                this.ajaxPost('/dataBoard/getperCapitaWagesBydata',{leaderType:'B'},this.getLaborCostCB)
            },
            getLaborCostCB:function(res){
                this.barLinePublic(res,res.data.datas,this.drawLaborCostChart)
            },
            drawLaborCostChart:function(option){
                var leftChart = echarts.init(this.$refs.laborCostChart)
                leftChart.setOption (option)
            },
            // 职工人数
            getStaffNumData:function(){
                this.ajaxPost('/dataBoard/getperCapitaWagesBydata',{leaderType:'C'},this.getStaffNumCB)
            },
            getStaffNumCB:function(res){
                this.barLinePublic(res,res.data.datas,this.drawStaffNumChart)
            },
            drawStaffNumChart:function(option){
                var leftChart = echarts.init(this.$refs.staffNumChart)
                leftChart.setOption (option)
            },
            // 人均工资
            getPerSalaryData:function(){
                this.ajaxPost('/dataBoard/getperCapitaWagesBydata',{leaderType:'A'},this.getPerSalaryCB)
            },
            getPerSalaryCB:function(res){
                this.barLinePublic(res,res.data.datas,this.drawPerSalaryChart)
            },
            drawPerSalaryChart:function(option){
                var leftChart = echarts.init(this.$refs.perSalaryChart)
                leftChart.setOption (option)
            },
            // 劳动生产率
            getProductivityRatioData:function(){
                this.ajaxPost('/dataBoard/getLaborCostBydata',{leaderType:'D'},this.getProductivityRatioCB)
            },
            getProductivityRatioCB:function(res){
                this.ratioPublic(res,res.data.datas,this.drawProductivityRatioChart)
            },
            drawProductivityRatioChart:function(option){
                var leftChart = echarts.init(this.$refs.productivityRatioChart)
                leftChart.setOption (option)
            },
            // 人事费用率
            getStaffCostRatioData:function(){
                this.ajaxPost('/dataBoard/getLaborCostBydata',{leaderType:'C'},this.getStaffCostRatioCB)
            },
            getStaffCostRatioCB:function(res){
                this.ratioPublic(res,res.data.datas,this.drawStaffCostRatioChart)
            },
            drawStaffCostRatioChart:function(option){
                var leftChart = echarts.init(this.$refs.staffCostRatioChart)
                leftChart.setOption (option)
            },
            // 人工成本利润率
            getLaborCostRatioData:function(){
                this.ajaxPost('/dataBoard/getLaborCostBydata',{leaderType:'A'},this.getLaborCostRatioCB)
            },
            getLaborCostRatioCB:function(res){
                this.ratioPublic(res,res.data.datas,this.drawLaborCostRatioChart)
            },
            drawLaborCostRatioChart:function(option){
                var leftChart = echarts.init(this.$refs.laborCostRatioChart)
                leftChart.setOption (option)
            },
            // 投入产出比
            getInoutRatioData:function(){
                this.ajaxPost('/dataBoard/getLaborCostBydata',{leaderType:'B'},this.getInoutRatioCB)
            },
            getInoutRatioCB:function(res){
                this.ratioPublic(res,res.data.datas,this.drawInoutRatioChart)
            },
            drawInoutRatioChart:function(option){
                var leftChart = echarts.init(this.$refs.inoutRatioChart)
                leftChart.setOption (option)
            },
            ajaxPost:function(url,params,callback){
                var self = this;
                this.Axios.Post(url,params)
                    .then(function(res){
                        if(callback){
                            callback(res,self)
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .paymentData .first-title h3{
        font-size: 24px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        line-height: 1.1;
    }
    .paymentData .paneRow{
        margin-bottom: 20px;
    }
    .paymentData .paneDiv{
        padding: 10px 0;
    }
    .paymentData .box-card{
        border-top:3px solid #00a65a;
    }
    .paymentData .chartDiv{
    }
</style>
<style>
    .paymentData .el-card__header{
        padding:11px 20px;
        border-bottom:0;
    }
    .paymentData .el-tabs.el-tabs--card{
        position: relative;
        top: -62px;
        margin-bottom: -62px;
    }
    .paymentData .el-tabs__nav{
        float: right;
    }
    .paymentData .el-card__body{
        min-height:350px;
    }
</style>
